<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo">
        <form action="/xxx" @submit.prevent="submit">
          <span>用户名: </span>
          <input type="text" v-model="user.username"><br>
      
          <span>密码: </span>
          <input type="password" v-model="user.pwd"><br>
      
          <span>性别: </span>
          <input type="radio" id="female" v-model="user.sex" value="女">
          <label for="female">女</label>
          <input type="radio" id="male" v-model="user.sex" value="男">
          <label for="male">男</label><br>
      
          <span>爱好: </span>
          <input type="checkbox" id="basket" v-model="user.likes" value="basket">
          <label for="basket">篮球</label>
          <input type="checkbox" id="foot" v-model="user.likes" value="foot">
          <label for="foot">足球</label>
          <input type="checkbox" id="pingpang" v-model="user.likes" value="pingpang">
          <label for="pingpang">乒乓</label><br>
      
          <span>城市: </span>
          <select v-model="user.cityId">
            <option value="">请选择</option>
            <option v-for="item in allCitys" :key="item.id" :value="item.id">
             {{item.name}}
            </option>
          </select><br>
          <span>介绍: </span>
          <textarea rows="10" v-model="user.info"></textarea><br><br>
      
          <input type="submit" value="注册">
        </form>
      </div>
    <script src="../day02/js/vue.js"></script>
    <script>
        new Vue({
            el:'#demo',
            data:{
                user:{
                    username:'',
                    pwd:'',
                    sex:'女',
                    likes:['foot'],
                    cityId:2,
                    info:'',
                },
                allCitys:[
                {id:1,name:'BJ'},
                {id:2,name:'DJ'},
                {id:3,name:'MM'},
                {id:4,name:'WLMQ'},
                {id:5,name:'SZ'},
                {id:6,name:'WH'}
                ],
            },

            methods:{
                submit(){
                    console.log(this.user);
                    alert("提交ajax请求");
                }
            }
        })
    </script>
</body>
</html>